<template>
	<view class="userLayout">
		<!-- 修改头像 -->
		<view class="avatar">
			<view class="box">
				<view class="inner">
					<image v-if="avatarUrl" :src="avatarUrl" mode="aspectFill"></image>
					<image v-else src="../../static/images/defAvatar.png" mode="aspectFill"></image>
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="btn">按钮</button>
					<view class="mask" v-if="uploadState">
						上传{{percentCompleted}}%
					</view>
				</view>

				<view class="icon">
					<uni-icons type="camera" color="#fff" size="16"></uni-icons>
				</view>
				<view class="text">点击更换头像</view>
			</view>
		</view>

		<!-- 设置信息列表 -->
		<view class="list">
			<uni-list>
				<uni-list-item showArrow title="用户ID" clickable :rightText="userInfo._id"
					@click="clickID(userInfo._id)" />
				<uni-list-item showArrow title="昵称" clickable :rightText="userInfo.username" @click="clickUsername" />
				<uni-list-item showArrow title="性别" clickable :rightText="formatGender(userInfo.gender)"
					@click="clickGender" />
				<uni-list-item showArrow title="注册时间" clickable :rightText="formatDate(userInfo.register_date)"
					@click="clickTime" />
			</uni-list>
		</view>
	</view>
	<!-- 昵称相关的 弹出框 -->
	<uni-popup ref="usernamePopup" type="dialog">
		<uni-popup-dialog mode="input" title="修改昵称" maxlength="15" v-model="userInfo.username" placeholder="请输入昵称"
			@confirm="usernameConfirm">
		</uni-popup-dialog>
	</uni-popup>

	<!-- 性别相关 弹出框 -->
	<uni-popup ref="genderPopup" type="dialog">
		<uni-popup-dialog @confirm="genderConfirm" title="修改性别" mode="input">
			<view class="genderForm">
				<radio-group @change="genderChange">
					<label class="radio" v-for="item in genderGroup" :key="item.value">
						<radio :value="item.value" :checked="genderValue == item.value" style="transform:scale(0.7)" />
						{{item.text}}
					</label>
				</radio-group>
			</view>
		</uni-popup-dialog>
	</uni-popup>

</template>

<script setup>
	// 导入 日期格式化方法,性别格式化方法
	import {
		formatDate,
		formatGender
	} from "../../utils/tools.js"
	import {
		ref,
		computed
	} from "vue";
	// 用户的数据 信息
	import {
		useUserStore
	} from "@/stores/user.js"
	const userStore = useUserStore()
	const userInfo = computed(() => userStore.userInfo)

	const usernamePopup = ref(null);
	const genderPopup = ref(null);

	//控制性别的改变
	const genderValue = ref(userStore.userInfo.gender || 0)

	//控制头像
	const avatarUrl = ref(userStore.userInfo.avatar)

	//控制遮罩层的显现 
	const uploadState = ref(false)
	//控制 上传的进度 
	const percentCompleted = ref(0)

	// 性别数据对象
	const genderGroup = ref([{
		value: 0,
		text: "保密"
	}, {
		value: 1,
		text: "男"
	}, {
		value: 2,
		text: "女"
	}])
	//点击id模块复制内容
	function clickID(value) {
		console.log(value);
		// 设置：可以点击id 的时候赋值id值  剪贴板功能设置
		uni.setClipboardData({
			data: value,
			success: res => {
				console.log(res);
			},
			fail: err => {
				console.log(err);
			}
		})
	}

	//点击获取头像
	function onChooseAvatar(e) {
		uploadState.value = true
		//获取头像的网址信息
		avatarUrl.value = e.detail.avatarUrl
		//云存储 存储 头像的网址信息
		uniCloud.uploadFile({
			filePath: avatarUrl.value,
			cloudPath: `userAvatar/${formatDate(Date.now(),"yyyyMMdd")}/${Date.now()}.jpg`, //修改之后的文件名
			cloudPathAsRealPath: true, //路径位置为 202503024 文件下面的  123.jpg
			//返回两个数组 一个是 总大小  一个是 上传的进度  
			onUploadProgress: function(progressEvent) {
				console.log(progressEvent);
				percentCompleted.value = Math.round(
					(progressEvent.loaded * 100) / progressEvent.total
				);
			}
		}).then(res => {
			//赋值  云端地址 
			avatarUrl.value = res.fileID
			console.log(res.fileID);
			userStore.updateUserInfo({
				avatar: avatarUrl.value
			})
			uploadState.value = false
		})
		// console.log(e);
	}

	//点击修改昵称
	function clickUsername() {
		usernamePopup.value.open();
	}

	//点击修改性别
	function clickGender() {
		genderPopup.value.open();
	}

	//点击注册时间
	function clickTime() {

	}


	//修改性别
	function genderChange(e) {
		console.log(e);
		//Number 把 字符串的形式改变为 数字类型
		genderValue.value = Number(e.detail.value)
	}

	//确认修改性别
	function genderConfirm() {
		uni.showLoading()
		userStore.updateUserInfo({
			gender: genderValue.value
		})
	}


	//确认修改昵称
	function usernameConfirm(e) {
		console.log(e);
		uni.showLoading()
		userStore.updateUserInfo({
			username: e
		})
	}
</script>

<style lang="scss" scoped>
	.userLayout {
		.avatar {
			padding: 100rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.box {
				height: 150rpx;
				width: 150rpx;
				position: relative;

				.inner {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						border: 1px solid #eee;
					}

					.btn {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						opacity: 0;
					}

					.mask {
						position: absolute;
						background: rgba(0, 0, 0, 0.6);
						color: #fff;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22rpx;
					}
				}

				.icon {
					width: 50rpx;
					height: 50rpx;
					background: #FE9468;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2px solid #fff;
					position: absolute;
					right: 0;
					bottom: 0;
					pointer-events: none;
				}

				.text {
					font-size: 25rpx;
					color: #999;
					white-space: nowrap;
					padding: 20rpx 0;
					text-align: center;
				}
			}
		}

		.list {
			padding: 50rpx 0rpx;
		}
	}

	.genderForm {
		.radio {
			padding: 0 10rpx;
		}
	}
</style>